import React, { PureComponent, Fragment } from 'react'

class Counter extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      counter: 0,
      friends: [
        {name: 'aa', age: 12},
        {name: 'bb', age: 13},
        {name: 'cc', age: 14}
      ]
    }
  }

  render() {
    return (
      <>
        <h2>Current count： {this.state.counter}</h2>
        <button onClick={ e =>this.increment() }>+1</button>
        <button onClick={ e => this.decrement() }>-1</button>
        <div>
          {
            this.state.friends.map(item => {
              return (
                <Fragment key={item.name}>
                  <div>{item.name}</div>
                  <p>{item.age}</p>
                  <hr/>
                </Fragment>
              )
            })
          }
        </div>
      </>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter +1
    })
  }

  decrement() {
    this.setState({
      counter: this.state.counter -1
    })
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <>
        <Counter/>
      </>
    )
  }
}